import { createApp } from "vue"
import Loading from "@/components/loading.vue"
export default {
  mounted(el, binding) {
    const {modifiers, value} = binding;
    if (value) {
      createInstance(el, binding)
    }
  },
  updated(el, binding) {
    createInstance(el, binding);
  }
}

const createInstance = (trigger, binding) => {
  const {value, oldValue, modifiers, arg} = binding;
  const fullScreen = modifiers?.fullScreen
  let target = fullScreen ? document.body : trigger;
  console.log('arg----', arg);
  console.log('fullScreen',  modifiers)
  if (oldValue !== value) {
    if (value && !oldValue) {
      const app = createApp(Loading); // 返回一个应用对象
      console.log('-appp---', app);
  
      const loadingEl = app.mount(document.createElement('div')).$el // 挂载应用（真实dom或选择器）
      loadingEl.setAttribute('id', 'curLoadingId');
      if (fullScreen) loadingEl.classList.add('is-full-screen');
      target.style.position = 'relative'
      arg?.bg && (loadingEl.style.backgroundColor = arg.bg);
      target.appendChild(loadingEl);
    } else {
      const childDiv = target.querySelector('#curLoadingId');
      target.style.position = '';
      target?.removeChild(childDiv);
      target.style.background = ''

    }
  } 
}